<template>
  <section class="section brand">
    <div class="container">
      <h2 class="h2 section-title" style="text-align: center">热门品牌</h2>
      <el-carousel :interval="10000" type="card" style="margin-top: 20px">
        <el-carousel-item v-for="item in brandList" :key="item.id">
          <img :src="item.logo" style="width: 80%;border-radius: 10px" @click="showDetail(item.id)">
        </el-carousel-item>
      </el-carousel>
    </div>
  </section>
</template>

<script>
import {fetchList} from "@/api/brand";

export default {
  name: "BrandList",
  data() {
    return {
      brandList: [],
      listQuery: {
        keyword: null,
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      fetchList(this.listQuery).then(response => {
        this.brandList = response.data.list;
        console.log(this.brandList)
      });
    },
    showDetail(val) {
      this.$router.push({
        path: '/front/brandDetail',
        query: {
          id: val
        }
      })
    }
  },
}
</script>